<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件使用</title>
    <script type="text/javascript" src="js/vue.min.js">
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .tabbarWrap {
            width: 20%;
            float: left;
            text-align: center;
        }
        
        .itemWrap span {
            font-size: 14px;
            color: #333;
        }
    </style>
</head>

<body>
    <div id="app">
        <tabbar></tabbar>
    </div>
    <!-- 父组件模板 -->
    <template id="parent">
        <div class="tabbarWrap">
            <item src="img/bg.png" txt="首页"></item>
            <item src="img/bg.png" txt="搜索"></item>
            <item src="img/bg.png" txt="热点"></item>
            <item src="img/bg.png" txt="购物车"></item>
            <item src="img/bg.png" txt="我的"></item>
        </div>
    </template>
    <!-- 子组件模板 -->
    <template id="son">
        <div class="itemWrap"><img :src="src">
        <br/>
        <span>{{txt}}</span>
        </div>
    </template>
</body>

</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {

        },
        components: {
            //父组件
            "tabbar": {
                template: "#parent",
                //子组件
                components: {
                    "item": {
                        template: "#son",
                        props: ["txt", "src"]
                    },
                }

            }
        }

    });
</script>